<template>
  <div class="banner">
    <el-icon class="btn" @click="back"><Back /></el-icon>
    <!-- 找不到路径组件的时候调用的组件 -->
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const back = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.banner {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  background: url("../assets/404banner.webp") no-repeat center;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
}
.btn {
  font-size: 40px;
  position: absolute;
  top: 78%;
  left: 49%;
  transform: translate(-50%, -50%);
}
</style>